<div class="kuiSideBarSection kuiSideBarSection__main">
  <div class="kuiSideBarSectionTitle">
    <div class="kuiSideBarSectionTitle__text">
      Y-Axes
    </div>

    <button
      data-test-subj="visualizeAddYAxisButton"
      aria-label="Add Y axis"
      ng-click="addValueAxis()"
      tooltip="Add Y axis"
      tooltip-append-to-body="true"
      type="button"
      class="kuiIcon fa-plus kuiSideBarSectionTitle__action"
    ></button>
  </div>

  <div
    ng-repeat="axis in vis.params.valueAxes track by axis.id"
    class="kuiSideBarSection"
  >
    <div class="kuiSideBarCollapsibleTitle">
      <div
        class="kuiSideBarCollapsibleTitle__label"
        ng-click="isValueAxisOpen = !isValueAxisOpen"
        kbn-accessible-click
        aria-expanded="{{!!isValueAxisOpen}}"
        aria-controls="axisOptions{{axis.id}}"
        aria-label="Toggle {{axis.name}} options"
      >
        <span
          aria-hidden="true"
          ng-class="{ 'fa-caret-down': isValueAxisOpen, 'fa-caret-right': !isValueAxisOpen }"
          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
        ></span>
        <span class="kuiSideBarCollapsibleTitle__text">
          {{axis.name}}
        </span>
      </div>

      <div tooltip="{{getSeries(axis)}}">{{getSeriesShort(axis)}}</div>

      <button
        ng-hide="vis.params.valueAxes.length === 1"
        aria-label="Remove Y axis"
        ng-click="removeValueAxis(axis)"
        tooltip="Remove Y axis"
        tooltip-append-to-body="true"
        type="button"
        class="kuiIcon fa-remove kuiSideBarCollapsibleTitle__action"
      ></button>
    </div>

    <div id="axisOptions{{axis.id}}" ng-show="isValueAxisOpen" class="kuiSideBarCollapsibleSection">
      <!-- General -->
      <div class="kuiSideBarSection">
        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="{ 'valueAxisShow' + $index }">
            Show
          </label>
          <div class="kuiSideBarFormRow__control">
            <input class="kuiCheckBox" id="{ 'valueAxisShow' + $index }" type="checkbox" ng-model="axis.show">
          </div>
        </div>

        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisTitle' + $index }}">
            Title
          </label>
          <div class="kuiSideBarFormRow__control">
            <input
              id="{{ 'valueAxisTitle' + $index }}"
              class="kuiInput kuiSideBarInput"
              type="text"
              ng-model="axis.title.text"
            >
          </div>
        </div>

        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisPosition' + $index }}">
            Position
          </label>
          <div class="kuiSideBarFormRow__control">
            <select
              id="{{ 'valueAxisPosition' + $index }}"
              class="kuiSelect kuiSideBarSelect"
              ng-change="updateAxisName(axis)"
              ng-model="axis.position"
              ng-options="mode disable when isPositionDisabled(mode) for mode in vis.type.editorConfig.collections.positions"
            ></select>
          </div>
        </div>

        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisMode' + $index }}">
            Mode
          </label>
          <div class="kuiSideBarFormRow__control">
            <select
              id="{{ 'valueAxisMode' + $index }}"
              class="kuiSelect kuiSideBarSelect"
              ng-model="axis.scale.mode"
              ng-options="mode for mode in vis.type.editorConfig.collections.axisModes"
            ></select>
          </div>
        </div>

        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisScaleType' + $index }}">
            Scale Type
          </label>
          <div class="kuiSideBarFormRow__control">
            <select
              id="{{ 'valueAxisScaleType' + $index }}"
              class="kuiSelect kuiSideBarSelect"
              ng-model="axis.scale.type"
              ng-options="type for type in vis.type.editorConfig.collections.scaleTypes"
            ></select>
          </div>
        </div>
      </div>

      <!-- Advanced options -->
      <div class="kuiSideBarSection">
        <a
          class="kuiSideBarOptionsLink"
          ng-click="isValueAxisAdvancedOptionsOpen = !isValueAxisAdvancedOptionsOpen"
          kbn-accessible-click
        >
          <span
            aria-hidden="true"
            ng-class="{ 'fa-caret-down': isValueAxisAdvancedOptionsOpen, 'fa-caret-right': !isValueAxisAdvancedOptionsOpen }"
            class="kuiIcon fa-caret-right kuiSideBarOptionsLink__caret"
          ></span>
          <span class="kuiSideBarOptionsLink__text">
            <span ng-show="!isValueAxisAdvancedOptionsOpen">
              Show
            </span>
            <span ng-show="isValueAxisAdvancedOptionsOpen">
              Hide
            </span>
            Advanced Options
          </span>
        </a>

        <div ng-show="isValueAxisAdvancedOptionsOpen">

          <!-- Labels -->
          <div class="kuiSideBarSection">
            <h6 class="kuiSideBarFormSectionTitle">
              Labels
            </h6>

            <div class="kuiSideBarFormRow">
              <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisShowLabels' + $index }}">
                Show Labels
              </label>
              <div class="kuiSideBarFormRow__control">
                <input class="kuiCheckBox" id="{{ 'valueAxisShowLabels' + $index }}" type="checkbox" ng-model="axis.labels.show">
              </div>
            </div>

            <div class="kuiSideBarFormRow">
              <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisFilterLabels' + $index }}">
                Filter Labels
              </label>
              <div class="kuiSideBarFormRow__control">
                <input class="kuiCheckBox" id="{{ 'valueAxisFilterLabels' + $index }}" type="checkbox" ng-model="axis.labels.filter">
              </div>
            </div>

            <div class="kuiSideBarFormRow">
              <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisRotateLabels' + $index }}">
                Rotate
              </label>
              <div class="kuiSideBarFormRow__control">
                <select
                  id="{{ 'valueAxisRotateLabels' + $index }}"
                  class="kuiSelect kuiSideBarSelect"
                  ng-model="axis.labels.rotate"
                  ng-options="mode.value as mode.name for mode in rotateOptions"
                ></select>
              </div>
            </div>

            <div class="kuiSideBarFormRow">
              <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisTruncateLabels' + $index }}">
                Truncate
              </label>
              <div class="kuiSideBarFormRow__control">
                <input
                  id="{{ 'valueAxisTruncateLabels' + $index }}"
                  class="kuiInput kuiSideBarInput"
                  type="number"
                  ng-model="axis.labels.truncate"
                >
              </div>
            </div>
          </div>

          <!-- Custom Extents -->
          <div class="kuiSideBarSection">
            <h6 class="kuiSideBarFormSectionTitle">
              Custom Extents
            </h6>

            <div class="kuiSideBarFormRow">
              <label class="kuiSideBarFormRow__label" for="{ 'defaultYExtents' + $index }">
                Scale to Data Bounds
              </label>
              <div class="kuiSideBarFormRow__control">
                <input class="kuiCheckBox" id="{ 'defaultYExtents' + $index }" type="checkbox" ng-model="axis.scale.defaultYExtents">
              </div>
            </div>

            <div class="kuiSideBarFormRow">
              <label class="kuiSideBarFormRow__label" for="{ 'setYExtents' + $index }">
                Set Axis Extents
              </label>
              <div class="kuiSideBarFormRow__control">
                <input class="kuiCheckBox" id="{ 'setYExtents' + $index }" type="checkbox" ng-model="axis.scale.setYExtents" ng-change="updateExtents(axis)">
              </div>
            </div>

            <div ng-if="axis.scale.setYExtents">
              <div class="kuiSideBarFormRow">
                <label class="kuiSideBarFormRow__label">
                  Max
                </label>
                <div class="kuiSideBarFormRow__control">
                  <input
                    name="yMax"
                    class="kuiInput kuiSideBarInput"
                    type="number"
                    step="0.1"
                    ng-model="axis.scale.max"
                  >
                </div>
              </div>

              <div class="kuiSideBarFormRow">
                <label class="kuiSideBarFormRow__label">
                  Min
                </label>
                <div class="kuiSideBarFormRow__control">
                  <input
                    name="yMin"
                    class="kuiInput kuiSideBarInput"
                    type="number"
                    step="0.1"
                    greater-than="{{axis.scale.type === 'log' ? 0 : ''}}"
                    ng-model="axis.scale.min"
                  >
                </div>
              </div>
              <div ng-show="axis.scale.type === 'log' && axis.scale.min <= 0">
                <span class="text-danger">Min must exceed 0 when a log scale is selected</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div style="height: 10px"></div>
</div>
